<template>
  <div class="top-bar" :style="bgc" :class="[ (!hasBack && !hasClose) ? 'center' : 'between' ]">
    <van-icon v-if="hasBack" class="back-icon" name="arrow-left" @click="goBack" />
    <van-icon v-if="hasClose" class="back-icon" name="arrow-left" />
    <span>{{title}}</span>
    <div></div>
  </div>
  <!-- <van-nav-bar
    title="标题"
    right-text="按钮"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />-->
</template>

<script>
export default {
  props: {
    title: { type: String, default: "" },
    hasBack: { type: Boolean, default: true },
    hasClose: { type: Boolean, default: false },
    bgc: { type: String }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {}
  }
};
</script>

<style lang="less" scoped>
.top-bar {
  display: flex;
  align-items: center;
  height: 10vh;
  padding: 0 3vw;
  background: #fff;
  letter-spacing: 2px;
  box-sizing: border-box;
  font-weight: 600;
  font-size: 17px;
  text-transform: capitalize;
}
.center {
  justify-content: center;
}
.between {
  justify-content: space-between;
}
</style>